<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致命游戏动画效果</title>
    <style>
@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	/* 字体属性 */
	font-family: "方正舒体";
	font-size: 80px;
	}
	body{
			background-image: url(../img/背景2.jpg);
			/* 背景尺寸属性*/
			background-size: 100% 61%;
			/* 背景平铺属性 */
			background-repeat: no-repeat;
			
			}
			.zmyx3{
				width: 200px;
				height: 200px;
				/* 判断选择器是否选中 */
				bo rder:1px solid red;
				/* 背景图片，复合属性 */
				background: url(../img/致命游戏/yaoshi.png);
				/*出现背景-背景图大于空间-设置背景尺寸*/
				background-size:100%100%;
				position: absolute;
				left:300px;
				top:300px;
				animation:zmyx3 10s linear infinite;
				
			}
			
	.zmyx{
		width: 880px;
		height: 200px;
		bo rder:1px solid red;
		background: url(../img/致命游戏/zhifu.png);
		background-size: 100%100%;
		position: relative;
		top:10px;
		left:370px;
		animation:zmyx 10s linear infinite;
		}
		.zmyx4{width: 940px;
			height: 370px;
			bo rder:1px solid red;
			background: url(../img/quanxiang.png);
			background-size: 100%100%;
			position: relative;
			top: -370px;
			left: 375px;
			
		}
		.zmyx1{
			width: 400px;
			height: 400px;
			bo rder:1px solid red;
			background: url(../img/致命游戏/zmyx.png);
			background-size: 100%100%;
			position: relative;
			top: 282px;
			left: 68px;
		}
		.zmyx2{
			width: 300px;
			height: 300px;
			bo rder:1px solid red;
			background: url(../img/致命游戏/haibao.png);
			background-size: 100%100%;
			position: relative;
			top:-58px;
			left:1360px;
			}
			.zmyx5{
			width: 400px;
			height: 400px;
			bo rder:1px solid red;
			background: url(../img/致命游戏/sw.png);
			background-size: 100%100%;
			position: relative;
			top: -1357px;
			left:900 px;
			}
		@keyframes 
		zmyx3{
			0%{   
 /*初始位置:页面下方 */
			   top:calc(80%-100px) ;
			   left:calc(50%-100px) ;
			   transform: scale(1) rotate(0deg);
			   opacity:1;/*完全显示 */
			   }
			   80% {
			   /*第一阶段:快速上升+小幅度旋转*/
			   top: calc(10%-100px);
			   left:calc(50%-100px);
			   transform: scale(1.2) rotate(-15deg);
			   }
			   100%{
			/*回到初始位置(循环)*/
			top: calc(-20%-100px);
			left: calc(50%-100px);
			transform: scale(1.1)rotate(-10deg);
			opacity:0;
			}
			}
			@keyframes zmyx {
			            0% {
			                transform: translateX(0);
			            }
			            50% {
			                transform: translateX(50px);
			            }
			            100% {
			                transform: translateX(0);
			            }
			        }
			    </style>
			</head>
			<body>
			    <div class="zmyx">支付区域</div>
			    <div class="zmyx1">致命游戏</div>
			    <div class="zmyx2">海报</div>
			    <div class="zmyx3">钥匙</div>
			</body>
			</html>